<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智慧物流应用平台加油端</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/css.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap1">
			<div class="top">
				<div class="top-inner w-m clearfix">
					<div class="left fl">
						<img src="img/logo.png" >
						<span>智慧物流应用平台</span>
					</div>
					<div class="right fr">
						<a href="javascript:;" onclick="tanfa()">无运单开阀</a>
						<a href=""><img src="img/editor.png" > 修改密码</a>
						<a href=""><img src="img/close.png" > 退出</a>
					</div>
				</div>
			</div>
			<div class="nav">
				<div class="w-m clearfix">
					<p class="fl">四川销售成都分公司水碾河加油站</p>
					<p class="fr">
						<a href="index.html" class="on">首页</a>
						<a href="history.html">历史计划</a>
						<a href="guiji.html">轨迹回放</a>
					</p>
				</div>
			</div>
			<div class="main w-m">
				<div class="box1">
					<ul class="clearfix">
						<li>
							<div class="lis lis1 clearfix">
								<div class="bar bar1">92#</div>
								<div class="data">
									<p>16722L</p>
									<p>76%</p>
								</div>
							</div>
							<div class="lis lis2 clearfix">
								<div class="bar bar2">98#</div>
								<div class="data">
									<p>16722L</p>
									<p>76%</p>
								</div>
							</div>
						</li>
						<li>
							<div class="lis lis3 clearfix">
								<div class="bar bar3">95#</div>
								<div class="data">
									<p>16722L</p>
									<p>76%</p>
								</div>
							</div>
							<div class="lis lis4 clearfix">
								<div class="bar bar4">0#</div>
								<div class="data">
									<p>16722L</p>
									<p>76%</p>
								</div>
							</div>
						</li>
						<li>
							<p><img src="img/zr.png" > 昨日销量：1000</p>
							<p><img src="img/yj.png" > 预计销量：1200</p>
							<p><img src="img/sj.png" > 库存可销时长：24天</p>
							<p><img src="img/mr.png" > 明日计划量：1300</p>
						</li>
						<li>
							<p><img src="img/yujin.png" > 预警信息：1</p>
							<p><img src="img/tuoxiao.png" > 脱销预警：1</p>
							<p><img src="img/zaihai.png" > 灾害预警：1</p>
							<p><img src="img/peisong.png" > 配送风险预警：1</p>
						</li>
					</ul>
				</div>
				<div class="box2 Scroll-left">
					<div class="hd"> 
					<a class="next"><img src="img/jian-l.png" ></a> 
					<a class="prev"><img src="img/jian-r.png" ></a> 
				</div>
					<div class="bd">		
						<ul class="clearfix picList">
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										<p>2仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cr fl">
										<p>3仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
								</div>
							</li>
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										<p>2仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cr fl">
										<p>3仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
								</div>
							</li>
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										<p>2仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cr fl">
										<p>3仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
								</div>
							</li>
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										<p>2仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cr fl">
										<p>3仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
								</div>
							</li>
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										 
									</div>
									<div class="cr fl">
										
									</div>
								</div>
							</li>
							<li>
								<div class="head">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/icon1.png" >
										<span>出库：</span>
										<span>104油库</span>
									</p>
									<p>
										<img src="img/icon2.png" >
										<span>计划号：</span>
										<span>2349284792834</span>
									</p>
									<p>
										<img src="img/icon3.png" >
										<span>预计到达时间：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/icon4.png" >
										<span>当前节点：</span>
										<span>上一趟次配送未结束</span>
									</p>
								</div>
								<div class="foot clearfix">
									<div class="cf fl">
										<p>1仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cc fl">
										<p>2仓</p>
										<p>92号汽油</p>
										<p>10000升</p>
									</div>
									<div class="cr fl">
										
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="box3">
					<div class="full">
						<img src="img/full.png" onclick="big()">
					</div>
					<div id="allmap" style="width: 100%; height:365px;"></div>
					<div class="tan">
						<div class="inner w-m clearfix">
							<div class="item tan1">
								<div class="tantit">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/siji.png" >
										<span>司机：</span>
										<span>蔡徐坤</span>
									</p>
									<p>
										<img src="img/tel.png" >
										<span>电话：</span>
										<span>13822223333</span>
									</p>
									<p>
										<img src="img/yayun.png" >
										<span>押运员：</span>
										<span>徐银</span>
									</p>
									<p>
										<img src="img/tel.png" >
										<span>电话：</span>
										<span>15244445555</span>
									</p>
									<p>
										<img src="img/time.png" >
										<span>预计到达：</span>
										<span>1小时32分钟</span>
									</p>
									<p>
										<img src="img/state.png" >
										<span>状态：</span>
										<span>已到站</span>
									</p>
									<p>
										<img src="img/baojin.png" >
										<span>在途报警：</span>
										<span>无/2</span>
									</p>
								</div>
							</div>
							<div class="item tan2">
								<div class="tantit">川AR1211</div>
								<div class="content">
									<p>
										<img src="img/car.png" >
										<span>车辆状态：</span>
										<span>在线/离线</span>
									</p>
									<p>
										<img src="img/dingwei.png" >
										<span>定位状态：</span>
										<span>正常/异常</span>
									</p>
									<p>
										<img src="img/yayun.png" >
										<span>气源状态：</span>
										<span>正常/异常</span>
									</p>
									<p>
										<img src="img/dian.png" >
										<span>供电状态：</span>
										<span>开/关</span>
									</p>
									<div>
										<input type="checkbox" name="" id="" value="" />
										<span>1仓卸油口阀门状态：开/关</span>
										<span></span>
									</div>
									<div>
										<input type="checkbox" name="" id="" value="" />
										<span>1仓卸油口阀门状态：开/关</span>
										<span class="col1"></span>
									</div>
									<div>
										<input type="checkbox" name="" id="" value="" />
										<span>1仓卸油口阀门状态：开/关</span>
										<span></span>
									</div>
									<div class="btn">
										<button type="button">开启</button>
										<button type="button">关闭</button>
									</div>
								</div>
							</div>
							<div class="close">
								<img src="img/cha.png" >
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<div class="tanfa">
				<div class="inner">
					<div class="left fl">
						<p class="title">当前在站车辆</p>
						<p><input type="radio" name="car" id="car1" value="" /><label for="car1">川AR1211</label></p>
						<p><input type="radio" name="car" id="car2" value="" /><label for="car2">川AR1211</label></p>
						<p><input type="radio" name="car" id="car3" value="" /><label for="car3">川AR1211</label></p>
					</div>
					<div class="right fl">
						<div class="title">阀门操作</div>
						<div class="content">
							<div class="tbox1">
								<div class="b-l">
									<p>当前操作车辆</p>
									<p>川AR1211</p>
								</div>
								<div class="b-r">
									<p>车辆状态</p>
									<p>供电：开/关</p>
									<p>供气：开/关</p>
									<p>状态：在线/离线</p>
								</div>
							</div>
							<div class="tbox2">
								<div class="head">
									<span>阀门编号</span>
									<span>操作</span>
									<span>当前状态</span>
								</div>
								<div class="body">
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i></i>
										</span>
									</p>
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i class="col2"></i>
										</span>
									</p>
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i></i>
										</span>
									</p>
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i class="col2"></i>
										</span>
									</p>
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i></i>
										</span>
									</p>
									<p>
										<span>前仓上阀门</span>
										<span>
											<button type="button">开</button>
											<button type="button">关</button>
										</span>
										<span>
											<i class="col2"></i>
										</span>
									</p>
								</div>
								
							</div>
						</div>
					</div>	
					<div class="closefa"><img src="img/cha.png" onclick="closefa()"></div>
				</div>	
				
			</div>
		</div>
	</body>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=2NABy5ccZ5eWbuVL6AowgQ9hauA44Eqr"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	jQuery(".Scroll-left").slide({
		titCell: ".hd ul",
		mainCell: ".bd ul",
		autoPage: true,
		effect: "left",
		autoPlay: true,
		vis: 3
	});
	
	function tanfa(){
		$('.tanfa').show()
	}
	function closefa(){
		$('.tanfa').hide()
	}
	
	$('.picList li').click(function(){
		$('.tan').show()
	})
	$('.close').click(function(){
		$('.tan').hide()
	})
	
	function big(){
		alert('放大')
	}
	showMap()
	function showMap(data_info){
		map = new BMap.Map("allmap");
		map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
		map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
	}
</script>
</html>